<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>院校详情 - 职微云职</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2553510_mzcpwhirgdh.css"> <!-- 使用阿里图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <!-- Bootstrap图标 -->
    <link rel="preconnect" href="https://source.unsplash.com"> <!-- 预连接图片服务 -->
</head>
<body class="page-transition">
    <header class="header">
        <div class="header-container">
            <div class="back-btn" id="back-button">
                <i class="iconfont icon-back"></i>
            </div>
            <h1 class="header-title">院校详情</h1>
            <div class="share-btn">
                <i class="iconfont icon-share"></i>
            </div>
        </div>
    </header>

    <div class="main-content">
        <!-- 院校基本信息 -->
        <div class="school-banner">
            <img src="https://source.unsplash.com/featured/600x300/?university,campus/1" alt="北京大学" class="school-cover">
            <div class="school-info">
                <h2 class="school-name">北京大学</h2>
                <div class="school-tags">
                    <span class="school-tag">985</span>
                    <span class="school-tag">211</span>
                    <span class="school-tag">综合类</span>
                    <span class="school-tag">双一流</span>
                </div>
            </div>
        </div>

        <!-- 院校介绍和导航 -->
        <div class="detail-nav">
            <div class="nav-item active" data-target="intro">学校介绍</div>
            <div class="nav-item" data-target="major">专业设置</div>
            <div class="nav-item" data-target="employment">就业情况</div>
            <div class="nav-item" data-target="alumni">校友资源</div>
        </div>

        <!-- 内容区域 -->
        <div class="detail-content">
            <!-- 学校介绍 -->
            <div class="content-section active" id="intro">
                <div class="section-title">学校简介</div>
                <div class="section-content school-intro">
                    <p>北京大学创办于1898年，初名京师大学堂，是中国近代第一所国立综合性大学，也是当时中国最高教育行政机关。辛亥革命后，于1912年改为现名。</p>
                    <p>作为新文化运动的中心和"五四"运动的策源地，作为中国最早传播马克思主义和民主科学思想的发祥地，作为中国共产党最早的活动基地，北京大学为民族的振兴和解放、国家的建设和发展、社会的文明和进步做出了不可替代的贡献，在中国走向现代化的进程中起到了重要的先锋作用。</p>
                    <p>爱国、进步、民主、科学的传统精神和勤奋、严谨、求实、创新的学风在这里生生不息、代代相传。</p>
                </div>
                
                <div class="section-title">基本信息</div>
                <div class="section-content">
                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-label">创办时间</div>
                            <div class="info-value">1898年</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">学校类型</div>
                            <div class="info-value">综合类</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">所在地区</div>
                            <div class="info-value">北京市</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">院士人数</div>
                            <div class="info-value">80+</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">国家重点学科</div>
                            <div class="info-value">15个</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">学校排名</div>
                            <div class="info-value">全国第1</div>
                        </div>
                    </div>
                </div>
                
                <div class="section-title">校园环境</div>
                <div class="section-content">
                    <div class="campus-gallery">
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?university,campus/1" alt="校园风光">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?university,campus/2" alt="校园风光">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?university,campus/3" alt="校园风光">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?university,campus/4" alt="校园风光">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?university,campus/5" alt="校园风光">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 专业设置 -->
            <div class="content-section" id="major">
                <div class="section-title">重点专业</div>
                <div class="section-content">
                    <div class="major-list">
                        <div class="major-item featured">
                            <div class="major-name">计算机科学与技术</div>
                            <div class="major-desc">国家一流专业，培养计算机领域的高端人才</div>
                        </div>
                        <div class="major-item featured">
                            <div class="major-name">经济学</div>
                            <div class="major-desc">国家一流专业，拥有完整的人才培养体系</div>
                        </div>
                        <div class="major-item featured">
                            <div class="major-name">法学</div>
                            <div class="major-desc">国家一流专业，培养卓越法律人才</div>
                        </div>
                        <div class="major-item featured">
                            <div class="major-name">电子信息工程</div>
                            <div class="major-desc">国家一流专业，强调理论与实践相结合</div>
                        </div>
                    </div>
                </div>
                
                <div class="section-title">学院及专业</div>
                <div class="section-content">
                    <div class="major-list">
                        <div class="major-item">
                            <div class="major-name">信息科学技术学院</div>
                            <div class="major-desc">计算机科学、电子工程、人工智能等方向</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">光华管理学院</div>
                            <div class="major-desc">工商管理、市场营销、金融学等方向</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">法学院</div>
                            <div class="major-desc">法学、国际法、知识产权法等方向</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">医学部</div>
                            <div class="major-desc">临床医学、基础医学、口腔医学等方向</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">文学院</div>
                            <div class="major-desc">中国语言文学、比较文学等方向</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 就业情况 -->
            <div class="content-section" id="employment">
                <div class="section-title">就业率</div>
                <div class="section-content">
                    <div class="employment-rate">
                        <div class="rate-circle" style="--percentage: 95%;">
                            <div class="rate-value">95%</div>
                        </div>
                        <div class="rate-label">近三年平均就业率</div>
                    </div>
                </div>
                
                <div class="section-title">毕业去向</div>
                <div class="section-content">
                    <div class="major-list">
                        <div class="major-item">
                            <div class="major-name">考研深造</div>
                            <div class="major-desc">占比约28%，主要前往清华、北大等高校</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">出国留学</div>
                            <div class="major-desc">占比约20%，主要前往欧美名校</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">国企就业</div>
                            <div class="major-desc">占比约18%，包括中央企业和地方国企</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">私企外企</div>
                            <div class="major-desc">占比约25%，主要是BAT等互联网企业</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">公务员及事业单位</div>
                            <div class="major-desc">占比约7%，分布在各级政府机构</div>
                        </div>
                    </div>
                </div>
                
                <div class="section-title">就业企业</div>
                <div class="section-content">
                    <div class="campus-gallery">
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?company,office/1" alt="腾讯科技">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?company,office/2" alt="阿里巴巴">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?company,office/3" alt="华为技术">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?company,office/4" alt="百度">
                        </div>
                        <div class="gallery-item">
                            <img src="https://source.unsplash.com/featured/300x200/?company,office/5" alt="中国工商银行">
                        </div>
                    </div>
                </div>
                
                <!-- 校园招聘信息 -->
                <div class="section-title">校园招聘岗位</div>
                <div class="section-content">
                    <div class="job-list">
                        <div class="job-item" data-id="j1">
                            <div class="job-company">
                                <img src="https://source.unsplash.com/featured/80x80/?logo,tech/1" alt="腾讯" class="company-logo">
                                <div class="company-info">
                                    <div class="company-name">腾讯</div>
                                    <div class="job-title">前端开发工程师</div>
                                </div>
                            </div>
                            <div class="job-details">
                                <div class="job-salary">15-25K/月</div>
                                <div class="job-tags">
                                    <span class="job-tag">本科及以上</span>
                                    <span class="job-tag">经验不限</span>
                                </div>
                                <div class="job-deadline">截止日期: 2023-06-30</div>
                            </div>
                        </div>
                        
                        <div class="job-item" data-id="j2">
                            <div class="job-company">
                                <img src="https://source.unsplash.com/featured/80x80/?logo,tech/2" alt="阿里巴巴" class="company-logo">
                                <div class="company-info">
                                    <div class="company-name">阿里巴巴</div>
                                    <div class="job-title">Java后端开发</div>
                                </div>
                            </div>
                            <div class="job-details">
                                <div class="job-salary">20-30K/月</div>
                                <div class="job-tags">
                                    <span class="job-tag">本科及以上</span>
                                    <span class="job-tag">1年以上</span>
                                </div>
                                <div class="job-deadline">截止日期: 2023-07-15</div>
                            </div>
                        </div>
                        
                        <div class="job-item" data-id="j3">
                            <div class="job-company">
                                <img src="https://source.unsplash.com/featured/80x80/?logo,tech/3" alt="百度" class="company-logo">
                                <div class="company-info">
                                    <div class="company-name">百度</div>
                                    <div class="job-title">AI算法工程师</div>
                                </div>
                            </div>
                            <div class="job-details">
                                <div class="job-salary">25-35K/月</div>
                                <div class="job-tags">
                                    <span class="job-tag">硕士及以上</span>
                                    <span class="job-tag">经验不限</span>
                                </div>
                                <div class="job-deadline">截止日期: 2023-06-25</div>
                            </div>
                        </div>
                        
                        <div class="view-more-jobs">
                            <button class="view-more-btn">查看更多招聘岗位 <i class="iconfont icon-arrow-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 校友资源 -->
            <div class="content-section" id="alumni">
                <div class="section-title">知名校友</div>
                <div class="section-content">
                    <div class="major-list">
                        <div class="major-item">
                            <div class="major-name">李彦宏</div>
                            <div class="major-desc">百度创始人、董事长兼CEO</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">张朝阳</div>
                            <div class="major-desc">搜狐创始人、董事长兼CEO</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">王小川</div>
                            <div class="major-desc">搜狗创始人、CEO</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">沈南鹏</div>
                            <div class="major-desc">红杉资本中国基金创始及执行合伙人</div>
                        </div>
                    </div>
                </div>
                
                <div class="section-title">校友活动</div>
                <div class="section-content">
                    <div class="major-list">
                        <div class="major-item">
                            <div class="major-name">校友返校日</div>
                            <div class="major-desc">每年5月举办，邀请各届校友回校交流</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">创业论坛</div>
                            <div class="major-desc">每季度举办，邀请成功校友分享经验</div>
                        </div>
                        <div class="major-item">
                            <div class="major-name">行业峰会</div>
                            <div class="major-desc">涵盖金融、科技、医疗等多个领域</div>
                        </div>
                    </div>
                </div>
                
                <!-- 校园活动 -->
                <div class="section-title">近期校园活动</div>
                <div class="section-content">
                    <div class="event-list">
                        <!-- 活动内容将由JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 相关院校推荐 -->
        <div class="related-section">
            <div class="section-title">相关院校推荐</div>
            <div class="related-list">
                <div class="related-item">
                    <img src="https://source.unsplash.com/featured/300x200/?university,campus/6" alt="清华大学" class="related-image">
                    <div class="related-info">
                        <div class="related-name">清华大学</div>
                        <div class="related-type">工科为主</div>
                    </div>
                </div>
                <div class="related-item">
                    <img src="https://source.unsplash.com/featured/300x200/?university,campus/7" alt="复旦大学" class="related-image">
                    <div class="related-info">
                        <div class="related-name">复旦大学</div>
                        <div class="related-type">综合类</div>
                    </div>
                </div>
                <div class="related-item">
                    <img src="https://source.unsplash.com/featured/300x200/?university,campus/8" alt="中国人民大学" class="related-image">
                    <div class="related-info">
                        <div class="related-name">中国人民大学</div>
                        <div class="related-type">文科为主</div>
                    </div>
                </div>
                <div class="related-item">
                    <img src="https://source.unsplash.com/featured/300x200/?university,campus/9" alt="浙江大学" class="related-image">
                    <div class="related-info">
                        <div class="related-name">浙江大学</div>
                        <div class="related-type">综合类</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 悬浮动作按钮 -->
        <div class="action-buttons">
            <div class="action-btn collect-btn">
                <i class="iconfont icon-star"></i>
                <span>收藏</span>
            </div>
            <div class="action-btn apply-btn">
                <span>申请了解</span>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/detail.js"></script>
</body>
</html> 